<template>
  <view>
    <!-- 商品组件 -->
    <scroll-view class="scroll-view_HPage" scroll-x="true"
      v-if="formData.ponentType === 1 && formData.firstCatList && formData.firstCatList.length > 0">
      <view v-for="(item, idx) in formData.firstCatList || []" :key="idx" :data-id="item.id" :data-mode="item.saleMode"
        @tap.stop="activeClass" :class="['tab__itam',currentCategoryId === item.id ? 'active' : '']">
        <view v-if="formData.titleStyle === 2" class="text new__active-class">
          {{ item.name }}
        </view>
        <view v-if="formData.titleStyle === 1" class="text">{{ item.name }}</view>
        <text v-if="formData.titleStyle === 1" class="line"></text>
      </view>
    </scroll-view>
    <view
      v-if="(formData.ponentType === 1 && formData.firstCatList && formData.firstCatList.length > 0) || (formData.ponentType === 2 && goodsList.length)"
      :class="['goods',formData.listStyle]" :style="{padding:`0 ${(formData.pagePadding*2)}rpx`}">
      <view v-for="(item, idx) in goodsList" :key="idx" :data-id="item.id" :data-img="item.img" @tap.stop="gotoDetail"
        :class="['goods-item',GoodsBoxClass]"
        :style="[idx === (goodsList.length - 1) ? GoodsLastStyle : GoodsItemStyle]">
        <view v-if="formData.showContent.tagShow" :class="['goods-item__coner ',GoodsCornerMark.class]">
          <image :src="GoodsCornerMark.url" mode="aspectFill" :lazy-load="true"></image>
        </view>
        <view class="goods-item__img">
          <view class="no__goods" v-if="!item.inventory">
            <text>已售罄</text>
            <text>Sold out</text>
          </view>
          <image :src="item.img" alt :lazy-load="true" mode="aspectFill" style="height:100%;"></image>
          <!-- <image src="{{ image.transformImage(item.img, '375')}}" mode="widthFix" alt="" lazy-load="{{true}}"></image> -->
        </view>
        <view :class="['goods-item__foot',formData.listStyle !== 'goods-style--three' ? 'add__f-p' : '']">
          <view v-if="formData.showContent.nameShow" :class="['goods-item__name',GoodsNameClass]">
            {{item.name}}
          </view>
          <view v-if="formData.showContent.priceShow||formData.showContent.buttonShow" class="goods-item__bottom">
            <view class="goods-item__price">
              <view class="price__one" v-if="formData.showContent.priceShow">
                {{ '￥' + item.price }}
                <text class="price__two">{{ '￥' + item.maxPrice }}</text>
              </view>
            </view>
            <view v-if="formData.showContent.buttonShow && formData.showContent.buttonStyle === 1"
              :class="['goods-item__cart','goods-item__cart1',ClassBugCard3]">
              <image src="https://oss-tencent.bgniao.cn//gruul/20200710/810700b67e264a7b82bba347528b9eb0.png"
                mode="aspectFit" :lazy-load="true"></image>
            </view>
            <view v-if="formData.showContent.buttonShow && formData.showContent.buttonStyle === 2"
              :class="['goods-item__cart','goods-item__cart2', ClassBugCard3]">
              <image src="https://oss-tencent.bgniao.cn//gruul/20200710/3de00f3d8099459c83771b1f4decb197.png"
                mode="aspectFit" :lazy-load="true"></image>
            </view>
            <view v-if="formData.showContent.buttonShow && formData.showContent.buttonStyle === 3"
              class="goods-item__cart goods-item__cart3">
              {{ formData.showContent.buttonText || '立即购买' }}
            </view>
            <view v-if="formData.showContent.buttonShow && formData.showContent.buttonStyle === 4"
              class="goods-item__cart goods-item__cart4">
              {{ formData.showContent.buttonText || '立即购买' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import {
    discountList,
    getAllCategory
  } from "@/api/modules/goods";
  import storage from "@/utils/storage";
  import isEqual from "lodash/isEqual";
  import {
    getEffectCategoryGoods
  } from "@/api/modules/goods";
  import md5 from "md5";

  interface IShowContent {
    /** 商品名称 */
    nameShow: boolean;
    /** 商品价格 */
    priceShow: boolean;
    /** 购物按钮 */
    buttonShow: boolean;
    /** 购物按钮样式 */
    buttonStyle: number;
    /** 购物车按钮文案 */
    buttonText: string;
    /** 商品角标 */
    tagShow: boolean;
    /** 商品角标样式 */
    tagStyle: number;
  }

  interface Goods {
    /** 1展示分类  2不展示分类 */
    ponentType: number;
    /** 商品 */
    goods: any[];
    /** 类目样式 1新  2下划线 */
    titleStyle: number;
    /** 列表样式 */
    listStyle: string;
    /** 页面边距 */
    pagePadding: number;
    /** 商品间距 */
    goodPadding: number;
    /** 商品样式 */
    goodsStyle: string;
    /** 图片倒角 */
    angle: string;
    /** 文本样式 */
    textStyle: string;
    /** 显示内容 */
    showContent: IShowContent;
    /** 商品对象 */
    goodsItem: any;
    /** 商品数量 */
    goodsCount: number;
  }

  interface IGoodsCornerMark {
    url: string,
      class: string
  }



  @Component({})
  export default class GoodsPonents extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: any

    formData: Goods={} as Goods
    currentCategoryId: string = "-1"
    GoodsCornerMark: IGoodsCornerMark = {
      // 商品角标地址及样式
      url: "",
      class: "",
    }
    goodsList: Array < any > = [] // 商品列表
    name: string = ""
    GoodsNameClass: string = ""
    GoodsBoxClass: string = ""
    ClassDelivery3: string = ""
    ClassBugCard3: string = ""
    GoodsItemStyle = {}
    GoodsLastStyle = {}
    saleMode: string = "" // 选择的商品专区

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      const formData = this.decoretionProperties;
      const md5Str = md5(formData);
      const storageData = storage.get(`discountList-${md5Str}`);
      // this.discountList(md5Str, storageData, formData);

      if (formData.ponentType === 1) {
        this.filterCategory(formData);
      } else if (formData.ponentType === 2) {
        this.discountList(md5Str, storageData, formData);
      }
      this.getGoodsCornerMark(formData);
      this.getGoodsNameClass(formData);
      this.getGoodsBoxClass(formData);
      this.getClassBugCard3(formData);
      this.getGoodsItemStyle(formData);
      this.getGoodsLastStyle(formData);

      this.formData = formData
    }

    /**
     * 获取商品名称文本样式
     */
    getGoodsNameClass(formData) {
      const {
        textStyle
      } = formData;
      this.GoodsNameClass = textStyle
    }

    /**
     * 获取商品边框样式
     */
    getGoodsBoxClass(formData) {
      const {
        goodsStyle,
        angle
      } = formData;
      this.GoodsBoxClass = `${goodsStyle} ${angle}`
    }

    /**
     * 购买按钮样式
     */
    getClassBugCard3(formData) {
      const {
        listStyle,
        showContent: {
          buttonStyle
        },
      } = formData;
      let ClassBugCard3 = "";

      if (buttonStyle === 1 && listStyle === "goods-style--four") {
        ClassBugCard3 = "goods-buy__cart3";
      }
      if (buttonStyle === 2 && listStyle === "goods-style--four") {
        ClassBugCard3 = "goods-buy__cart3 buy-icon2";
      }

      this.ClassBugCard3 = ClassBugCard3;
    }

    /**
     * 商品item样式
     */
    getGoodsItemStyle(formData) {
      const {
        listStyle,
        goodPadding
      } = formData;
      let margin = "";
      let width = "";

      if (listStyle === "goods-style--four") {
        margin =`0 ${goodPadding}px 0 0`
      } else {
        margin =`0 0 ${goodPadding}px 0`
      }
      if (listStyle === "goods-style--two") {
        width = `calc(50% - ${goodPadding / 2}px)`;
      } else {
        width = "";
      }
      this.GoodsItemStyle = {
        margin,
        width
      }
    }

    /**
     * 最后一个商品样式
     */
    getGoodsLastStyle(formData) {
      const {
        listStyle,
        goodPadding = 0
      } = formData;
      let margin = "";
      if (listStyle === "goods-style--two") {
        margin = `margin: 0px 0px ${goodPadding}px 0px;`;
      } else {
        margin = "";
      }
      this.GoodsLastStyle = {
        margin
      }
    }

    /**
     * 获取商品ids
     */
    goodsIds(formData) {
      const list = Array.isArray(formData.goods) ? formData.goods : [];
      return list.map(i => i.id).join(",");
    }

    /**
     * 获取销售专区id
     */
    saleModeIds(formData) {
      const list = Array.isArray(formData.goods) ? formData.goods : [];
      return Array.from(new Set(list.map(i => i.saleMode)));
    }

    /**
     * 初始化数据，需要过滤掉不可用掉一级分类
     */
    async filterCategory(formData) {
      try {
        const res = await getAllCategory({});
        const list = res || [];
        const {
          firstCatList = []
        } = formData;
        const value = [] as any;
        list.forEach(i => {
          i.productNumber = i.showCategoryVos.reduce((a, b) => {
            a += Number(b.productNumber);
            return a;
          }, 0);
          if (i.productNumber > 50) i.productNumber = 50;
        });
        firstCatList.forEach(i => {
          const category = list.find(k => k.id === i.id);
          if (category) {
            category.saleMode = i.saleMode;
            value.push(category);
          }
        });
        // value.unshift({
        //   id: "-1",
        //   name: "全部",
        //   saleMode: "0",
        //   productNumber: list.reduce((a, b) => {
        //     a += Number(b.productNumber);
        //     return a;
        //   }, 0),
        // });
        formData.firstCatList = value;
        // currentCategoryId: "-1",
        this.currentCategoryId = value[0].id
        this.saleMode = value[0].saleMode
        this.formData = formData
        this.getAllList();
      } catch (e) {
        console.log('goods-ponents.vue--lin337', e);
      }
    }

    /**
     * 激活tab
     */
    activeClass(e) {
      const id = e.currentTarget.dataset.id;
      const saleMode = e.currentTarget.dataset.mode;
      this.currentCategoryId = id,
        this.saleMode = saleMode,
        this.getAllList();
    }

    /**
     * 过滤不可用的商品
     */
    async discountList(md5: string, storageData, formData) {
      const ids: string = this.goodsIds(formData);
      const saleModeList = this.saleModeIds(formData);
      if (!ids) return;
      let list = [] as any;
      const goodsList: any = [];
      // if (storageData) {
      //   this.setDataSmart({ goodsList: storageData });
      //   return;
      // }
      setTimeout(async () => {
        for (let i = 0; i < saleModeList.length; i++) {
          const res = await discountList(ids, {
            saleMode: saleModeList[i],
            launchArea:""
          });
          list = list.concat(res);
          if (i === saleModeList.length - 1) {
            // clearInterval(time);
            list.forEach(item => {
              goodsList.push({
                id: item.id,
                img: this.returnGoodsImg(item),
                name: item.name,
                price: item.minPrice,
                maxPrice: item.maxPrice,
                inventory: item.inventory,
              });
              const obj = {
                goodsList
              };
              this.dealGoodsSort(obj, ids.split(","));
              this.goodsList = obj.goodsList;
            });
            if (list && !isEqual(list, storageData)) {
              storage.set(`discountList-${md5}`, list, 3 * 24 * 60 * 60 * 1000);
            }
          }
        }
      }, 100);
    }

    /**
     * 处理商品顺序
     */
    dealGoodsSort(obj, ids: any = []) {
      const temp: any = [];
      const goods = obj.goodsList;
      ids.forEach(i => {
        const e = goods.find((t: any) => t.id === i);
        e && temp.push(e);
      });
      goods.forEach((i: any) => {
        !ids.includes(i.id) && temp.push(i);
      });
      obj.goodsList = temp;
    }

    /**
     * 处理商品图片
     */
    returnGoodsImg(item) {
      const {
        widePic,
        pic
      } = item;
      let url = pic;
      if (this.formData.listStyle === "goods-style--one") {
        url = widePic ? widePic.split(",")[0] : pic;
      }
      return url;
    }

    /**
     * 检查商品价格是否是数字
     */
    checkGoodsPrice(item) {
      if (item.minPrice) {
        item.minPrice = !isNaN(Number(item.minPrice)) ?
          Number(item.minPrice).toFixed(2) :
          item.minPrice;
      }
      if (item.maxPrice) {
        item.maxPrice = !isNaN(Number(item.maxPrice)) ?
          Number(item.maxPrice).toFixed(2) :
          item.maxPrice;
      }
    }

    /**
     * 获取商品角标地址及样式
     */
    getGoodsCornerMark(formData = this.formData) {
      const {
        tagStyle
      } = formData.showContent;
      // 商品角标 1新品 2热卖 3抢购
      const srcs = [
        "https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/gruul/20201026/37a28e49acb448fc8618d5e72851b027.png",
        "https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/gruul/20201026/1622a28ef72040f9a2f367a2efa7c32d.png",
        "https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/gruul/20201026/0f33444422b14a8e980cc50d0011e2d0.png",
      ];
      const styles = [
        "goods-item__coner1",
        "goods-item__coner2",
        "goods-item__coner3",
      ];
      this.GoodsCornerMark = {
        url: srcs[+tagStyle - 1],
        class: styles[+tagStyle - 1],
      }
    }

    /**
     * 获取商品
     */
    async getAllList() {
      const ids = [] as any;
      if (this.currentCategoryId === "-1") {
        (this.formData as any).firstCatList.map(i => {
          if (i.id !== "-1") ids.push(i.id);
        });
      } else {
        ids.push(this.currentCategoryId);
      }
      const param = {
        saleMode: this.saleMode,
      };

      const res = await getEffectCategoryGoods(ids.join(","),param);
      const datas = [] as any;
      res.forEach(k => {
        k.apiAliveProductVos.forEach(sd => {
          if (!datas.find(t => t.id === sd.id)) datas.push(sd);
        });
      });
      const goodsList = [];
      this.goodsList = goodsList
      datas.forEach(item => {
        goodsList.push({
          id: Number(item.id),
          name: item.name,
          img: this.returnGoodsImg(item),
          actPrice: item.maxPrice,
          price: this.dealGoogsPrice(item.minPrice),
          maxPrice: this.dealGoogsPrice(item.maxPrice),
          soldCount: item.sale,
          inventory: item.inventory,
          hasTimeTips: item.hasTimeTips,
        });
      });
      this.goodsList = goodsList.sort((a, b) => (a.name > b.name ? -1 : 1))
      const formData = this.formData;
      this.getGoodsCornerMark(formData);
      this.getGoodsNameClass(formData);
      this.getGoodsBoxClass(formData);
      this.getClassBugCard3(formData);
      this.getGoodsItemStyle(formData);
      this.getGoodsLastStyle(formData);
    }

    /**
     * 处理商品价格
     */
    dealGoogsPrice(minPrice = 0) {
      let price: any = Number(minPrice);
      if (isNaN(price)) {
        price = 0;
      } else {
        if (price >= 10000 && price < 100000000) {
          price = `${parseFloat((price / 10000).toFixed(2))}万`;
        } else if (price > 100000000) {
          price = `${parseFloat((price / 100000000).toFixed(2))}亿`;
        }
      }
      return price;
    }

    /**
     * 进入商品详情
     */
    gotoDetail(e) {
      const {
        id,
        img
      } = e.currentTarget.dataset;
      uni.navigateTo({
        url: `/subcontract/pages/detail/detail?id=${id}&img=${img}`,
      });
    }


  }
</script>

<style lang="scss" scoped>
  @include b(goods-item) {
    position: relative;
    background-color: #fff;

    @include when(circle) {
      border-radius: 6px;
      overflow: hidden;
    }

    @include when(shadow) {
      // box-shadow: 0 0 4px rgba($color: #000000, $alpha: 0.4);
      box-shadow: 0px 1px 56px 6px rgba(109, 109, 109, 0.1);
    }

    @include when(border) {
      border: 1px solid #eeeeee;
    }

    @include e(img) {
      height: 180px;
      background-color: #eeeeee;
      overflow: hidden;
      position: relative;

      image {
        height: 180px;
        width: 100%;
      }
    }

    @include e(name) {
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 10rpx;
      -webkit-line-clamp: 2;
      word-wrap: break-word;
      white-space: normal !important;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;

      @include when(bold) {
        font-weight: 800;
      }
    }

    @include e(foot) {
      padding: 0 7px;
      position: relative;

      .is-bold {
        font-weight: 800;
      }
    }

    .add__f-p {
      padding-bottom: 15px;
    }

    @include e(bottom) {
      display: flex;
      justify-content: space-between;
      height: 35px;
      padding: 3px 0;
      // padding-top: 10px;
      margin-top: 10px;
    }

    @include e(price) {
      line-height: 37px;
      flex: 1;

      view {
        display: inline-block;
        line-height: 37px;
        height: 37px;
      }

      .price__one {
        font-size: 36rpx;
        color: #DD3C2B;
        font-weight: bold;

      }

      .price__two {
        text-decoration: line-through;
        color: #BBBBBB;
        font-size: 10px;
        margin-left: 8px;
      }
    }

    @include e(icon) {
      display: inline-block;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background-color: red;
      border-radius: 100%;
      color: #ffffff;
    }

    @include e(cart1) {
      float: right;
      height: 30px;
      width: 30px;
      background-color: rgba(252, 98, 63, 1);
      box-sizing: border-box;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
    }

    @include e(cart) {
      float: right;
      height: 30px;
      width: 30px;
      box-sizing: border-box;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 17px;

      image {
        display: inline-block;
        width: 20px;
        height: 20px;
      }
    }

    @include e(cart1) {
      background-color: #fff;

      image {
        display: inline-block;
        width: 30px;
        height: 30px;
      }
    }

    @include e(cart2) {
      background: linear-gradient(164deg, rgba(243, 243, 243, 1), rgba(229, 56, 46, 1), rgba(253, 78, 38, 1));
      box-shadow: 0px 2px 7px 0px rgba(255, 14, 0, 0.27);
      border-radius: 50%;
    }

    @include e(cart3) {
      border: 1px solid rgba(252, 98, 63, 1);
      width: auto;
      padding: 0 5px;
      color: rgba(252, 98, 63, 1);
      font-size: 12px;
      border-radius: 20px;
      height: 25px;
      line-height: 25px;
    }

    @include e(cart4) {
      border: 1px solid rgba(252, 98, 63, 1);
      background-color: rgba(252, 98, 63, 1);
      width: auto;
      padding: 0 5px;
      color: #fff;
      font-size: 12px;
      border-radius: 20px;
      height: 25px;
      line-height: 25px;
    }

    @include e(coner) {
      position: absolute;
      z-index: 12;

      image,
      text {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }

    @include e(coner1) {
      left: -1px;
      top: 6px;
      width: 38px;
      height: 22px;
      z-index: 7;
    }

    @include e(coner2) {
      left: 0px;
      top: 0px;
      width: 38px;
      height: 41px;
    }

    @include e(coner3) {
      left: 8px;
      top: 7px;
      width: 42px;
      height: 21px;
    }

    @include e(delivery) {
      padding-top: 2px;

      .i_box {
        border: 1px solid rgba(233, 56, 38, 1);
        border-radius: 17px;
        color: #E93826;
        font-size: 11px;
        display: inline-block;
        padding: 0 6px;
      }

      .base_info {
        padding: 1px 6px;
        background-color: #E93826;
        color: #fff;
        border-radius: 17px;
        display: none;
      }

      .hasTip {
        padding-left: 0px;

        .base_info {
          display: inline-block;
          margin-right: 1px;
        }
      }
    }

    .goods-item__delivery3 {
      transform: scale(0.76);
      position: absolute;
      left: 2px;
      top: 100rpx;
    }

    .goods-buy__cart3 {
      width: 17px;
      height: 18px;
    }

    .buy-icon2 {
      margin-top: 8px;

      image {
        width: 38rpx;
        height: 38rpx;
      }
    }
  }

  @include b(goods-style) {
    @include m(two) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      @include b(goods-item) {
        width: 49%;
      }
    }

    @include m(three) {
      @include b(goods-item) {
        padding: 5px 0;
        display: flex;
        width: 100%;

        @include e(img) {
          height: 135px;
          width: 135px;
          margin-right: 10px;
          flex: none;
        }

        @include e(foot) {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        @include e(name) {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    @include m(four) {
      white-space: nowrap;
      overflow-x: auto;

      @include b(goods-item) {
        display: inline-block;
        width: 135px;

        @include e(img) {
          height: 135px;
          width: 135px;
          margin-right: 10px;
        }

        @include e(foot) {}

        @include e(name) {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  @include b(goods) {
    // background-color: #ffffff;
    box-sizing: border-box;
  }


  .no__goods {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -88rpx;
    margin-top: -88rpx;
    z-index: 11;
    width: 176rpx;
    height: 176rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-direction: column;

    text {
      display: block;
      width: 176rpx;
      text-align: center;
      font-size: 25rpx;
    }
  }

  .goods-style--one {
    .goods-item__cart {
      margin-top: 5rpx;
    }
  }

  .goods-style--two {
    .goods-item__bottom {
      height: 35px;
    }

    .goods-item__cart {
      margin-top: 5rpx;
    }
  }

  .goods-style--three {
    .goods-item__cart {
      margin-top: 5rpx;
    }

    .goods-item__foot {
      position: relative;
    }

    .goods-item__delivery {
      position: absolute;
      left: 15rpx;
      top: 105rpx;
    }

    .goods-item__bottom {
      height: 86rpx;
      // padding-top: 3px;
    }

    .goods-item__name {
      padding-top: 18rpx;
      // line-height: 45rpx;
    }
  }

  .goods-style--four {
    .goods-item__bottom {
      height: 80rpx;
      margin-top: 25px;
    }

    .goods-item__cart {
      margin-top: 10rpx;
    }

    .goods-buy__cart3 {
      width: 30px;
      height: 30px;
    }
  }

  .scroll-view_HPage {
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    margin-bottom: 8px;
    white-space: nowrap;

    .tab__itam {
      display: inline-block;
      position: relative;
      height: 80rpx;
      padding: 0rpx 22rpx;
      font-size: 16px;
      font-family: Hiragino Sans GB;
      font-weight: normal;
      color: #6B6B6B;
      padding-top: 12rpx;

      .line {
        display: none;
        ;
      }

      .text {
        // float: left;
        z-index: 8;
        white-space: nowrap;
      }
    }

    .active {
      font-size: 18px;
      font-family: Hiragino Sans GB;
      font-weight: normal;
      color: #000000;

      .new__active-class {
        z-index: 8;
        white-space: nowrap;
        display: inline-block;
        padding-bottom: 2px;
        border-bottom: 2px solid red;
        font-weight: bold;
      }

      .line {
        display: block;
        float: left;
        width: 100%;
        background: linear-gradient(164deg, #F3F3F3, #E5382E, #FD4E26);
        border-radius: 4rpx;
        margin-top: -20rpx;
        height: 18rpx;
      }
    }
  }
</style>